<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>OpenLayers v8.2.0 API - Module: ol/featureloader</title>
  <script src="scripts/prettify/prettify.js"></script>
  <script src="scripts/prettify/lang-css.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
    crossorigin="anonymous"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/fontawesome.min.css"
    crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/solid.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css"
    href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.2/css/brands.css" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="styles/prettify-tomorrow.css">
  <link rel="stylesheet" type="text/css" href="styles/jaguar.css">
  <link rel="stylesheet" type="text/css" href="styles/carbon.css">
  <link rel="stylesheet" type="text/css" href="/theme/ol.css">
  <link rel="stylesheet" type="text/css" href="/theme/site.css">
</head>

<body>
  <header class="navbar navbar-expand-sm navbar-dark mb-3 px-3 py-0 fixed-top" role="navigation">
    <a class="navbar-brand" href="/"><img src="/theme/img/logo-dark.svg" width="70" height="70"
        alt="">&nbsp;OpenLayers</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#olmenu"
      aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- menu items that get hidden below 768px width -->
    <nav class="collapse navbar-collapse" id="olmenu">
      <ul class="nav navbar-nav ms-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">Docs</a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="docdropdown">
            <a class="dropdown-item" href="/doc/">Docs</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/doc/quickstart.html"><i class="fa fa-check fa-fw me-2 fa-lg"></i>快速入门</a>
            <a class="dropdown-item" href="/doc/faq.html"><i class="fa fa-question fa-fw me-2 fa-lg"></i>常见问题</a>
            <a class="dropdown-item" href="/doc/tutorials/"><i class="fa fa-book fa-fw me-2 fa-lg"></i>教程</a>

          </div>
        </li>
        <li class="nav-item"><a class="nav-link" href="/en/latest/examples/">Examples</a></li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="apidropdown" role="button" data-bs-toggle="dropdown"
            aria-haspopup="true" aria-expanded="false">
            <i class="fa fa-sitemap me-1"></i>API
          </a>
          <div class="dropdown-menu dropdown-menu-end mb-3" aria-labelledby="apidropdown">
            <a class="dropdown-item" href="/en/latest/apidoc/"><i class="fa fa-sitemap fa-fw me-2 fa-lg"></i>v8.2.0
              (latest)</a </div>
        </li>
      </ul>
    </nav>
  </header>

  <div class="container-fluid">
    <div id="wrap" class="row">
      <div class="navigation col-md-4 col-lg-3">
        <div class="search-wrapper">
          <div class="search">
            <input id="search" type="text" autocomplete="off" class="form-control input-sm"
              placeholder="Search Documentation">
          </div>
        </div>
        <div class="navigation-list-wrapper">
          <ul class="navigation-list search-empty">
            <li class="item item-module toggle-manual toggle-manual-show" data-longname="module:ol/featureloader"
              data-name="ol/featureloader">
              <span class="title toggle">
                <span class="fa fa-plus me-2 mt-1"></span>
                <span><a href="module-ol_featureloader.html">ol​/featureloader</a></span>
              </span>
              <div class="member-list" data-type="typedefs">
                <span class="subtitle">Typedefs</span>
                <ul>
                  <li data-name="featureloader"><a href="module-ol_featureloader.html#~FeatureLoader">FeatureLoader</a>
                  <li data-name="featureurlfunction"><a
                      href="module-ol_featureloader.html#~FeatureUrlFunction">FeatureUrlFunction</a>
                </ul>
              </div>
              <div class="member-list" data-type="methods">
                <span class="subtitle">Methods</span>
                <ul>
                  <li data-name="setwithcredentials"><a
                      href="module-ol_featureloader.html#.setWithCredentials">setWithCredentials</a>
                  <li data-name="xhr"><a href="module-ol_featureloader.html#.xhr">xhr</a>
                </ul>
              </div>
            <li class="loading">Loading …
          </ul>
        </div>
      </div>

      <div class="main col-md-8 col-lg-9">
        <h1 class="page-title" data-filename="module-ol_featureloader.html">Module: ol/featureloader</h1>
        <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
          <button id="latest-dismiss" type="button" class="btn-close" data-bs-dismiss="alert"
            aria-label="Close"></button>
          This documentation is for OpenLayers v<span id="package-version">8.2.0</span>. The <a id="latest-link"
            href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
        </div>




        <section class="content">

          <header>
            <h2 class="my-3">ol/featureloader
            </h2>
            <br>



            <pre class="prettyprint source"><code>import * as olFeatureloader from 'ol/featureloader';</code></pre>


            <!-- <div class="row p-3 ">
              <div id="ad" class="col-lg-5 order-2 align-self-center border rounded bg-light ">
                <script async type="text/javascript"
                  src="https://cdn.carbonads.com/carbon.js?serve=CE7DV53U&placement=openlayersorg"
                  id="_carbonads_js"></script>
              </div>

            </div> -->
          </header>

          <article>
            <div class="container-overview">






              <dl class="details">





















              </dl>




            </div>


















            <h3 class="subsection-title">Functions</h3>

            <dl>


              <dt class="">

                <div class="nameContainer">
                  <div class="anchor" id=".setWithCredentials">
                  </div>
                  <h4 class="name">
                    setWithCredentials<span class="signature">(xhrWithCredentials)</span>



                  </h4>

                  <div class="tag-source">
                    <a
                      href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/featureloader.js">featureloader.js</a>,
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/featureloader.js#L178">line
                      178</a>
                  </div>

                </div>


              </dt>
              <dd class="">



                <pre class="prettyprint source"><code>import {setWithCredentials} from 'ol/featureloader';</code></pre>



                <div class="description">
                  <p>Setter for the withCredentials configuration for the XHR.</p>
                </div>










                <table class="params">
                  <thead>
                    <tr>

                      <th>Name</th>


                      <th>Type</th>

                      <th class="last">Description</th>
                    </tr>
                  </thead>

                  <tbody>


                    <tr class="">

                      <td class="name"><code>xhrWithCredentials</code></td>



                      <td class="type">


                        <span class="param-type">boolean</span>




                      </td>



                      <td class="description last">

                        <p>The value of withCredentials to set.
                          Compare <a
                            href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/">https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/</a>
                        </p>
                      </td>
                    </tr>


                  </tbody>
                </table>




                <dl class="details">





















                </dl>













              </dd>




              <dt class="">

                <div class="nameContainer">
                  <div class="anchor" id=".xhr">
                  </div>
                  <h4 class="name">
                    xhr<span class="signature">(url, format)</span><span class="fa fa-arrow-circle-right"></span><span
                      class="type-signature returnType">{<a
                        href="module-ol_featureloader.html#~FeatureLoader">FeatureLoader</a>}</span>



                  </h4>

                  <div class="tag-source">
                    <a
                      href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/featureloader.js">featureloader.js</a>,
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/featureloader.js#L137">line
                      137</a>
                  </div>

                </div>


              </dt>
              <dd class="">



                <pre class="prettyprint source"><code>import {xhr} from 'ol/featureloader';</code></pre>



                <div class="description">
                  <p>Create an XHR feature loader for a <code>url</code> and <code>format</code>. The feature loader
                    loads features (with XHR), parses the features, and adds them to the
                    vector source.</p>
                </div>










                <table class="params">
                  <thead>
                    <tr>

                      <th>Name</th>


                      <th>Type</th>

                      <th class="last">Description</th>
                    </tr>
                  </thead>

                  <tbody>


                    <tr class="">

                      <td class="name"><code>url</code></td>



                      <td class="type">


                        <span class="param-type">string</span>
                        |

                        <span class="param-type"><a
                            href="module-ol_featureloader.html#~FeatureUrlFunction">FeatureUrlFunction</a></span>




                      </td>



                      <td class="description last">

                        <p>Feature URL service.</p>
                      </td>
                    </tr>



                    <tr class="">

                      <td class="name"><code>format</code></td>



                      <td class="type">


                        <span class="param-type"><a
                            href="module-ol_format_Feature-FeatureFormat.html">FeatureFormat</a></span>




                      </td>



                      <td class="description last">

                        <p>Feature format.</p>
                      </td>
                    </tr>


                  </tbody>
                </table>




                <dl class="details">





















                </dl>















                <h5>Returns:</h5>
                The feature loader.
                <br />




              </dd>

            </dl>



            <h3 class="subsection-title">Type Definitions</h3>

            <dl>

              <dt class="">

                <div class="nameContainer">
                  <div class="anchor" id="~FeatureLoader">
                  </div>
                  <h4 class="name">
                    FeatureLoader<span class="signature">()</span>



                  </h4>

                  <div class="tag-source">
                    <a
                      href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/featureloader.js">featureloader.js</a>,
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/featureloader.js#L13">line
                      13</a>
                  </div>

                </div>


              </dt>
              <dd class="">




                <div class="description">
                  <p><a href="module-ol_source_Vector-VectorSource.html"><code>VectorSource</code></a> sources use a
                    function of this type to
                    load features.</p>
                  <p>This function takes up to 5 arguments. These are an <a
                      href="module-ol_extent.html#~Extent"><code>Extent</code></a> representing
                    the area to be loaded, a <code>{number}</code> representing the resolution (map units per pixel), an
                    <a href="module-ol_proj_Projection-Projection.html"><code>Projection</code></a> for the projection,
                    an optional success callback that should get
                    the loaded features passed as an argument and an optional failure callback with no arguments. If
                    the callbacks are not used, the corresponding vector source will not fire
                    <code>'featuresloadend'</code> and
                    <code>'featuresloaderror'</code> events. <code>this</code> within the function is bound to the
                    <a href="module-ol_source_Vector-VectorSource.html"><code>VectorSource</code></a> it's called from.
                  </p>
                  <p>The function is responsible for loading the features and adding them to the
                    source.</p>
                </div>











                <dl class="details">





















                </dl>













              </dd>



              <dt class="">

                <div class="nameContainer">
                  <div class="anchor" id="~FeatureUrlFunction">
                  </div>
                  <h4 class="name">
                    FeatureUrlFunction<span class="signature">()</span>



                  </h4>

                  <div class="tag-source">
                    <a
                      href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/featureloader.js">featureloader.js</a>,
                    <a href="https://github.com/openlayers/openlayers/blob/v8.2.0/src/ol/featureloader.js#L36">line
                      36</a>
                  </div>

                </div>


              </dt>
              <dd class="">




                <div class="description">
                  <p><a href="module-ol_source_Vector-VectorSource.html"><code>VectorSource</code></a> sources use a
                    function of this type to
                    get the url to load features from.</p>
                  <p>This function takes an <a href="module-ol_extent.html#~Extent"><code>Extent</code></a> representing
                    the area
                    to be loaded, a <code>{number}</code> representing the resolution (map units per pixel)
                    and an <a href="module-ol_proj_Projection-Projection.html"><code>Projection</code></a> for the
                    projection as
                    arguments and returns a <code>{string}</code> representing the URL.</p>
                </div>











                <dl class="details">





















                </dl>













              </dd>

            </dl>



          </article>

        </section>




      </div>
    </div>
  </div>
  <script>prettyPrint();</script>
  <script src="scripts/linenumber.js"></script>
  <script src="scripts/main.js"></script>
</body>

</html>